<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../../taglib.jsp" %>
<html>
<head>
    <title>千寻</title>
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header header header-demo">
        <div class="layui-main">
            <a class="logo" style="left: 0;" href="javascript:void (0);">
                <img src="${path}/layui/images/logo-1.png" alt="layui">
            </a>
            <ul class="layui-nav">
                <li class="layui-nav-item">
                    <a href="javascript:;" class="admin-header-user">
                        <c:if test="${userEntity.headImg==null}">
                            <img src="${path}/layui/images/0.jpg" style="width: 40px; height: 40px; border-radius: 100%;" />
                        </c:if>
                        <c:if test="${userEntity.headImg!=null}">
                            <img src="${imgpath}${userEntity.headImg}" style="width: 40px; height: 40px; border-radius: 100%;" />
                        </c:if>
                        <span>${userEntity.userName}</span>
                    </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:void (0);"><i class="fa fa-user-circle" aria-hidden="true"></i> 个人信息</a>
                        </dd>
                        <dd>
                            <a href="javascript:void (0);"><i class="fa fa-gear" aria-hidden="true"></i> 设置</a>
                        </dd>
                        <dd>
                            <a href="${path}/loginOut.do"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll" id="menu">
            <ul class="layui-nav layui-nav-tree site-demo-nav">
                <li class="layui-nav-item layui-nav-title">
                    <a>基本元素</a>
                </li>
            </ul>
            <c:forEach items="${list}" var="item" varStatus="status">
                <ul class="layui-nav layui-nav-tree admin-nav-tree">
                    <li class="layui-nav-item">
                        <a><i class="layui-icon" style="top: 1px;">${item.icon}</i><cite>${item.permissionName}</cite></a>
                        <c:if test="${item.userChildList!= null}">
                            <dl class="layui-nav-child">
                                <c:forEach items="${item.userChildList}" var="itemTwo" varStatus="status2">
                                    <c:if test="${itemTwo.parentId == item.id }">
                                        <dd><a href="javascript:void (0);" data-url="${path}${itemTwo.permissionSign}"><i class="layui-icon" style="top: 1px;">${itemTwo.icon}</i><cite>${itemTwo.permissionName}</cite></a></dd>
                                    </c:if>
                                </c:forEach>
                            </dl>
                        </c:if>
                    </li>
                </ul>
            </c:forEach>
        </div>
    </div>
    <div class="layui-body" style="bottom: 0;">
        <div class="layui-tab admin-nav-card" lay-filter="admin-tab">
            <ul class="layui-tab-title" id="admin-tab">
                <li class="layui-this">
                    <i class="layui-icon" style="top: 2px; font-size: 16px;">&#xe609;</i>
                    <cite>控制台</cite>
                </li>
            </ul>
            <div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;" id="admin-tab-container">
                <div class="layui-tab-item layui-show">
                    <iframe src="${path}/index.do"></iframe>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-footer footer footer-demo" id="admin-footer">
        <div class="layui-main">
            <p>2016 &copy;
                <a href="http://www.wurui.online">www.wurui.online</a> LGPL license
            </p>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['element', 'layer'], function() {
        var element = layui.element(),
                $ = layui.jquery,
                layer = layui.layer;

        //iframe自适应
        $(window).on('resize', function() {
            var $content = $('.admin-nav-card .layui-tab-content');
            $content.height($(this).height() - 147);
            $content.find('iframe').each(function() {
                $(this).height($content.height());
            });
        }).resize();

        //添加tab
        var $tabs = $('#admin-tab');
        var $container = $('#admin-tab-container');
        //绑定 nav 点击事件
        $('ul.admin-nav-tree').find('dd > a').each(function() {
            var $this = $(this);
            //获取设定的url
            var url = $this.data('url');

            if(url !== undefined) {
                $this.on('click', function() {
                    var iframe = '<iframe src="' + url + '"></iframe>';
                    var aHtml = $this.html();
                    var count = 0;
                    var tabIndex;
                    $tabs.find('li').each(function(i, e) {
                        var $cite = $(this).children('cite');
                        if($cite.text() === $this.find('cite').text()) {
                            count++;
                            tabIndex = i;
                        };
                    });
                    //tab不存在
                    if(count === 0) {
                        //添加删除样式
                        aHtml += '<i class="layui-icon layui-unselect layui-tab-close">&#x1006;</i>';
                        //添加tab
                        element.tabAdd('admin-tab', {
                            title: aHtml,
                            content: iframe
                        });
                        //iframe 自适应
                        var $content = $('.admin-nav-card .layui-tab-content');
                        $content.find('iframe').each(function() {
                            $(this).height($content.height());
                        });
                        //绑定关闭事件
                        $tabs = $('#admin-tab');
                        var $li = $tabs.find('li');
                        $li.eq($li.length - 1).children('i.layui-tab-close').on('click', function() {
                            element.tabDelete('admin-tab', $(this).parent('li').index()).init();
                        });
                        //获取焦点
                        element.tabChange('admin-tab', $li.length - 1);

                    } else {
                        //切换tab
                        element.tabChange('admin-tab', tabIndex);
                    }
                });
            }
        });

        $('#user').on('click', function() {
            $('#user-item').toggle();
        });
    });
</script>
</body>
</html>